$alert-background-critical= rgb(250, 234, 234);
$alert-background-info= rgb(232, 244, 253);
$alert-background-success= rgb(234, 245, 234);
$alert-background-warning= rgb(254, 242, 230);
$alert-icon-critical= rgb(210, 28, 28);
$alert-icon-info= rgb(0, 112, 200);
$alert-icon-success= rgb(4, 135, 36);
$alert-icon-warning= rgb(179, 98, 0);
$alert-color-text-critical= rgb(151, 12, 12);
$alert-color-text-info= rgb(0, 90, 163);
$alert-color-text-success= rgb(41, 107, 51);
$alert-color-text-warning= rgb(138, 69, 0);
$alert-color-text-link= rgb(79, 94, 113);
$badge-border-radius= 12;
$badge-bundle-basic-background= linear-gradient(to top right, #E13E3B 0%, #E87E09 100%);
$badge-bundle-basic-foreground= rgb(255, 255, 255);
$badge-bundle-medium-background= linear-gradient(to top right, #3719AB 0%, #8539DB 100%);
$badge-bundle-medium-foreground= rgb(255, 255, 255);
$badge-bundle-top-background= linear-gradient(to top right, #2D2D2E 0%, #696E73 100%);
$badge-bundle-top-foreground= rgb(255, 255, 255);
$badge-critical-background= rgb(210, 28, 28);
$badge-critical-foreground= rgb(255, 255, 255);
$badge-critical-subtle-background= rgb(250, 234, 234);
$badge-critical-subtle-foreground= rgb(151, 12, 12);
$badge-dark-background= rgb(37, 42, 49);
$badge-dark-foreground= rgb(255, 255, 255);
$badge-info-background= rgb(0, 112, 200);
$badge-info-foreground= rgb(255, 255, 255);
$badge-info-subtle-background= rgb(232, 244, 253);
$badge-info-subtle-foreground= rgb(0, 90, 163);
$badge-neutral-background= rgb(245, 247, 249);
$badge-neutral-foreground= rgb(37, 42, 49);
$badge-success-background= rgb(4, 135, 36);
$badge-success-foreground= rgb(255, 255, 255);
$badge-success-subtle-background= rgb(234, 245, 234);
$badge-success-subtle-foreground= rgb(41, 107, 51);
$badge-warning-background= rgb(179, 98, 0);
$badge-warning-foreground= rgb(255, 255, 255);
$badge-warning-subtle-background= rgb(254, 242, 230);
$badge-warning-subtle-foreground= rgb(138, 69, 0);
$badge-white-background= rgb(255, 255, 255);
$badge-white-foreground= rgb(37, 42, 49);
$button-link-critical-background= transparent; // Used for the background of critical ButtonLink in the default state.
$button-link-critical-background-hover= rgb(248, 226, 226); // Used for the background of critical ButtonLink in the hover state.
$button-link-critical-background-active= rgb(243, 206, 206); // Used for the background of critical ButtonLink in the active and the focus state.
$button-link-critical-foreground= rgb(210, 28, 28); // Used for the text of critical ButtonLink in the default state.
$button-link-critical-foreground-hover= rgb(185, 25, 25); // Used for the text of critical ButtonLink in the hover state.
$button-link-critical-foreground-active= rgb(157, 21, 21); // Used for the text of critical ButtonLink in the active and the focus state.
$button-link-primary-background= transparent; // Used for the background of primary ButtonLink in the default state.
$button-link-primary-background-hover= rgb(214, 240, 236); // Used for the background of primary ButtonLink in the hover state.
$button-link-primary-background-active= rgb(191, 232, 226); // Used for the background of primary ButtonLink in the active and the focus state.
$button-link-primary-foreground= rgb(0, 143, 123); // Used for the text of primary ButtonLink in the default state.
$button-link-primary-foreground-hover= rgb(0, 92, 79); // Used for the text of primary ButtonLink in the hover state.
$button-link-primary-foreground-active= rgb(0, 66, 57); // Used for the text of primary ButtonLink in the active and the focus state.
$button-link-secondary-background= transparent; // Used for the background of secondary ButtonLink in the default state.
$button-link-secondary-background-hover= rgb(229, 234, 239); // Used for the background of secondary ButtonLink in the hover state.
$button-link-secondary-background-active= rgb(214, 222, 230); // Used for the background of secondary ButtonLink in the active and the focus state.
$button-link-secondary-foreground= rgb(37, 42, 49); // Used for the text of secondary ButtonLink in the default state.
$button-link-secondary-foreground-hover= rgb(24, 27, 32); // Used for the text of secondary ButtonLink in the hover state.
$button-link-secondary-foreground-active= rgb(11, 12, 15); // Used for the text of secondary ButtonLink in the active and the focus state.
$button-bundle-basic-background= linear-gradient(to top right, #E13E3B 0%, #E87E09 100%);
$button-bundle-basic-background-hover= linear-gradient(to top right, #BD2825 0%, #D67000 100%);
$button-bundle-basic-background-active= linear-gradient(to top right, #9F1816 0%, #C36802 100%);
$button-bundle-medium-background= linear-gradient(to top right, #3719AB 0%, #8539DB 100%);
$button-bundle-medium-background-hover= linear-gradient(to top right, #2D1393 0%, #7343AA 100%);
$button-bundle-medium-background-active= linear-gradient(to top right, #250F79 0%, #5A3485 100%);
$button-bundle-top-background= linear-gradient(to top right, #2D2D2E 0%, #696E73 100%);
$button-bundle-top-background-hover= linear-gradient(to top right, #171718 0%, #51575C 100%);
$button-bundle-top-background-active= linear-gradient(to top right, #101011 0%, #51575C);
$button-critical-subtle-background= rgb(250, 234, 234);
$button-critical-subtle-background-hover= rgb(248, 226, 226);
$button-critical-subtle-background-active= rgb(243, 206, 206);
$button-critical-subtle-foreground= rgb(151, 12, 12);
$button-critical-subtle-foreground-hover= rgb(137, 11, 11);
$button-critical-subtle-foreground-active= rgb(109, 9, 9);
$button-critical-background= rgb(210, 28, 28);
$button-critical-background-hover= rgb(185, 25, 25);
$button-critical-background-active= rgb(157, 21, 21);
$button-critical-foreground= rgb(255, 255, 255);
$button-critical-foreground-hover= rgb(255, 255, 255);
$button-critical-foreground-active= rgb(255, 255, 255);
$button-small-font-size= 13;
$button-normal-font-size= 15;
$button-large-font-size= 16;
$button-info-background= rgb(0, 112, 200);
$button-info-background-hover= rgb(1, 97, 172);
$button-info-background-active= rgb(1, 80, 142);
$button-info-foreground= rgb(255, 255, 255);
$button-info-foreground-hover= rgb(255, 255, 255);
$button-info-foreground-active= rgb(255, 255, 255);
$button-without-text-padding= 0;
$button-padding-x-small= 8;
$button-padding-small= 12;
$button-padding-normal= 16;
$button-padding-large= 28;
$button-primary-subtle-background= rgb(225, 244, 243);
$button-primary-subtle-background-hover= rgb(214, 240, 236);
$button-primary-subtle-background-active= rgb(191, 232, 226);
$button-primary-subtle-foreground= rgb(0, 112, 97);
$button-primary-subtle-foreground-hover= rgb(0, 92, 79);
$button-primary-subtle-foreground-active= rgb(0, 66, 57);
$button-primary-background= rgb(0, 143, 123);
$button-primary-background-hover= rgb(0, 117, 101);
$button-primary-background-active= rgb(0, 97, 83);
$button-primary-foreground= rgb(255, 255, 255);
$button-primary-foreground-hover= rgb(255, 255, 255);
$button-primary-foreground-active= rgb(255, 255, 255);
$button-primary-border-color-focus= rgba(0, 143, 123, 0.5);
$button-secondary-background= rgb(232, 237, 241);
$button-secondary-background-hover= rgb(220, 227, 233);
$button-secondary-background-active= rgb(202, 212, 222);
$button-secondary-foreground= rgb(37, 42, 49);
$button-secondary-foreground-hover= rgb(24, 27, 32);
$button-secondary-foreground-active= rgb(11, 12, 15);
$button-success-background= rgb(4, 135, 36);
$button-success-background-hover= rgb(4, 118, 32);
$button-success-background-active= rgb(3, 99, 27);
$button-success-foreground= rgb(255, 255, 255);
$button-success-foreground-hover= rgb(255, 255, 255);
$button-success-foreground-active= rgb(255, 255, 255);
$button-warning-background= rgb(179, 98, 0);
$button-warning-background-hover= rgb(153, 84, 0);
$button-warning-background-active= rgb(128, 70, 0);
$button-warning-foreground= rgb(255, 255, 255);
$button-warning-foreground-hover= rgb(255, 255, 255);
$button-warning-foreground-active= rgb(255, 255, 255);
$button-white-background= rgb(255, 255, 255);
$button-white-background-hover= rgb(245, 247, 249);
$button-white-background-active= rgb(229, 234, 239);
$button-white-foreground= rgb(37, 42, 49);
$button-white-foreground-hover= rgb(24, 27, 32);
$button-white-foreground-active= rgb(11, 12, 15);
$button-white-border-color-focus= rgba(231, 236, 241, 0.5);
$country-flag-shadow= rgb(37, 42, 49);
$country-flag-background= transparent;
$country-flag-small-height= 9px;
$country-flag-small-width= 16px;
$country-flag-medium-height= 13px;
$country-flag-medium-width= 24px;
$dialog-border-radius-desktop= 9px;
$dialog-border-radius-mobile= 12px;
$dialog-width= 540px;
$drawer-overlay-background= rgba(37, 42, 49, 0.5);
$form-box-small-height= 32;
$form-box-normal-height= 44;
$form-box-large-height= 52;
$form-element-background= rgb(255, 255, 255);
$form-element-disabled-background= rgb(232, 237, 241);
$form-element-disabled-foreground= rgb(79, 94, 113);
$form-element-disabled-opacity= 50;
$form-element-border-color-disabled= transparent;
$form-element-border-color= rgb(186, 199, 213);
$form-element-border-color-hover= rgb(166, 182, 200);
$form-element-border-color-active= rgb(148, 168, 190);
$form-element-border-color-focus= rgb(0, 112, 200); // Should be used for all form-elements when the component has active or focus state and it's needed to render border attribute, or combined with shadows.
$form-element-border-color-error= rgb(210, 28, 28); // Should be used for all form-elements when the component has error state and it's needed to render border attribute, or combined with shadows.
$form-element-border-color-error-hover= rgb(185, 25, 25); // Should be used for all form-elements when the component has error and hover state and it's needed to render border attribute, or combined with shadows.
$form-element-box-shadow= rgb(186, 199, 213);
$form-element-box-shadow-error= rgb(210, 28, 28);
$form-element-box-shadow-error-hover= rgb(185, 25, 25);
$form-element-box-shadow-hover= rgb(166, 182, 200);
$form-element-focus-box-shadow= rgb(0, 112, 200);
$form-element-error-focus-box-shadow= rgb(210, 28, 28);
$form-element-normal-font-size= 15;
$form-element-normal-padding= null;
$form-element-large-font-size= 16;
$form-element-foreground= rgb(101, 120, 144); // Should be used for the text when the value is not filled.
$form-element-filled-foreground= rgb(37, 42, 49);
$form-element-label-foreground= rgb(37, 42, 49);
$form-element-label-filled= rgb(79, 94, 113);
$form-element-prefix-foreground= rgb(79, 94, 113);
$form-element-small-padding= null;
$heading-display-font-size= 40;
$heading-display-font-weight= 700;
$heading-display-line-height= 44;
$heading-display-subtitle-font-size= 22;
$heading-display-subtitle-font-weight= 400;
$heading-display-subtitle-line-height= 28;
$heading-title-0-font-size= 28;
$heading-title-0-font-weight= 700;
$heading-title-0-line-height= 36;
$heading-title-1-font-size= 24;
$heading-title-1-font-weight= 700;
$heading-title-1-line-height= 32;
$heading-title-2-font-size= 20;
$heading-title-2-font-weight= 700;
$heading-title-2-line-height= 28;
$heading-title-3-font-size= 18;
$heading-title-3-font-weight= 700;
$heading-title-3-line-height= 24;
$heading-title-4-font-size= 16;
$heading-title-4-font-weight= 700;
$heading-title-4-line-height= 22;
$heading-title-5-font-size= 15;
$heading-title-5-font-weight= 700;
$heading-title-5-line-height= 20;
$heading-title-6-font-size= 13;
$heading-title-6-font-weight= 700;
$heading-title-6-line-height= 18;
$heading-foreground= rgb(37, 42, 49);
$heading-foreground-inverted= rgb(255, 255, 255);
$icon-primary-foreground= rgb(37, 42, 49);
$icon-secondary-foreground= rgb(79, 94, 113);
$icon-tertiary-foreground= rgb(186, 199, 213);
$icon-info-foreground= rgb(0, 112, 200);
$icon-success-foreground= rgb(4, 135, 36);
$icon-warning-foreground= rgb(179, 98, 0);
$icon-critical-foreground= rgb(210, 28, 28);
$icon-small-size= 16;
$icon-medium-size= 20;
$icon-large-size= 24;
$icon-extra-large-size= 28;
$illustration-extra-small-height= 90;
$illustration-small-height= 120;
$illustration-medium-height= 200;
$illustration-large-height= 280;
$illustration-display-height= 460;
$modal-border-radius= 16;
$modal-extra-small-width= 360;
$modal-small-width= 540;
$modal-normal-width= 740;
$modal-large-width= 900;
$modal-extra-large-width= 1280;
$tab-bundle-basic-foreground= linear-gradient(80.91deg, #E13E3B 0%, #E87E09 100%);
$tab-bundle-basic-background= rgb(255, 255, 255);
$tab-bundle-basic-background-hover= rgba(215, 51, 28, 0.08);
$tab-bundle-basic-background-active= rgba(215, 51, 28, 0.12);
$tab-bundle-medium-foreground= linear-gradient(80.91deg, #3719AB  0%, #8539DB 100%);
$tab-bundle-medium-background= rgb(255, 255, 255);
$tab-bundle-medium-background-hover= rgba(59, 30, 176, 0.08);
$tab-bundle-medium-background-active= rgba(59, 30, 176, 0.12);
$tab-bundle-top-background= rgb(255, 255, 255);
$tab-bundle-top-background-hover= rgb(241, 244, 247);
$tab-bundle-top-foreground= linear-gradient(80.91deg, #2D2D2E 0%, #696E73 100%);
$background-table-shadow-left= linear-gradient(to left, transparent, rgba(186, 199, 213, 23));
$background-table-shadow-right= linear-gradient(to right, transparent, rgba(186, 199, 213, 23));
$tag-colored-background= rgb(232, 244, 253);
$tag-colored-background-hover= rgb(222, 240, 252);
$tag-colored-background-active= rgb(199, 228, 250);
$tag-colored-foreground= rgb(0, 56, 102);
$tag-neutral-background= rgb(232, 237, 241);
$tag-neutral-background-hover= rgb(220, 227, 233);
$tag-neutral-background-active= rgb(202, 212, 222);
$tag-neutral-foreground= rgb(37, 42, 49);
$text-link-primary-foreground= rgb(0, 112, 97);
$text-link-primary-foreground-hover= rgb(0, 92, 79);
$text-link-primary-foreground-active= rgb(0, 66, 57);
$text-link-secondary-foreground= rgb(37, 42, 49);
$text-link-secondary-foreground-hover= rgb(0, 92, 79);
$text-link-secondary-foreground-active= rgb(0, 66, 57);
$text-link-success-foreground= rgb(41, 107, 51);
$text-link-success-foreground-hover= rgb(33, 89, 42);
$text-link-success-foreground-active= rgb(22, 59, 28);
$text-link-info-foreground= rgb(0, 90, 163);
$text-link-info-foreground-hover= rgb(0, 79, 143);
$text-link-info-foreground-active= rgb(0, 56, 102);
$text-link-warning-foreground= rgb(138, 69, 0);
$text-link-warning-foreground-hover= rgb(112, 56, 0);
$text-link-warning-foreground-active= rgb(77, 38, 0);
$text-link-critical-foreground= rgb(151, 12, 12);
$text-link-critical-foreground-hover= rgb(137, 11, 11);
$text-link-critical-foreground-active= rgb(99, 8, 8);
$text-link-white-foreground= rgb(255, 255, 255);
$text-link-white-foreground-hover= rgb(225, 244, 243);
$text-link-white-foreground-active= rgb(225, 244, 243);
$text-primary-background= rgba(37, 42, 49, 0.1);
$text-primary-foreground= rgb(37, 42, 49);
$text-secondary-background= rgba(79, 94, 113, 0.1);
$text-secondary-foreground= rgb(79, 94, 113);
$text-info-background= rgba(0, 112, 200, 0.1);
$text-info-foreground= rgb(0, 112, 200);
$text-success-background= rgba(4, 135, 36, 0.1);
$text-success-foreground= rgb(4, 135, 36);
$text-warning-background= rgba(179, 98, 0, 0.1);
$text-warning-foreground= rgb(179, 98, 0);
$text-critical-background= rgba(210, 28, 28, 0.1);
$text-critical-foreground= rgb(210, 28, 28);
$text-white-background= rgba(255, 255, 255, 0.1);
$text-white-foreground= rgb(255, 255, 255);
$border-radius-50= 2;
$border-radius-100= 4;
$border-radius-150= 6;
$border-radius-200= 8;
$border-radius-300= 12;
$border-radius-400= 16;
$border-radius-none= 0;
$border-radius-full= 9999;
$breakpoint-medium-mobile= 414;
$breakpoint-large-mobile= 576;
$breakpoint-tablet= 768;
$breakpoint-desktop= 992;
$breakpoint-large-desktop= 1200;
$duration-fast= 150;
$duration-normal= 300;
$duration-slow= 400;
$elevation-suppressed-background= rgb(245, 247, 249);
$elevation-flat-background= rgb(255, 255, 255);
$elevation-flat-border-color= rgb(232, 237, 241);
$elevation-flat-border-size= 1;
$elevation-nav-bar-box-shadow= rgb(27, 50, 73);
$elevation-level-1-box-shadow= rgb(79, 94, 113);
$elevation-level-2-box-shadow= rgb(79, 94, 113);
$elevation-fixed-background= rgb(255, 255, 255);
$elevation-fixed-box-shadow= rgb(37, 42, 49);
$elevation-fixed-reverse-background= rgb(255, 255, 255);
$elevation-fixed-reverse-box-shadow= rgb(79, 94, 113);
$elevation-level-3-box-shadow= rgb(79, 94, 113);
$elevation-level-3-reverse-box-shadow= rgb(79, 94, 113);
$elevation-level-4-box-shadow= rgb(79, 94, 113);
$palette-blue-light= rgb(232, 244, 253);
$palette-blue-light-hover= rgb(222, 240, 252);
$palette-blue-light-active= rgb(199, 228, 250);
$palette-blue-normal= rgb(0, 112, 200);
$palette-blue-normal-hover= rgb(1, 97, 172);
$palette-blue-normal-active= rgb(1, 80, 142);
$palette-blue-dark= rgb(0, 90, 163);
$palette-blue-dark-hover= rgb(0, 79, 143);
$palette-blue-dark-active= rgb(0, 62, 112);
$palette-blue-darker= rgb(0, 56, 102);
$palette-bundle-basic= rgb(215, 51, 28);
$palette-bundle-medium= rgb(59, 30, 176);
$palette-cloud-light= rgb(245, 247, 249);
$palette-cloud-light-hover= rgb(229, 234, 239);
$palette-cloud-light-active= rgb(214, 222, 230);
$palette-cloud-normal= rgb(232, 237, 241);
$palette-cloud-normal-hover= rgb(220, 227, 233);
$palette-cloud-normal-active= rgb(202, 212, 222);
$palette-cloud-dark= rgb(186, 199, 213);
$palette-cloud-dark-hover= rgb(166, 182, 200);
$palette-cloud-dark-active= rgb(148, 168, 190);
$palette-green-light= rgb(234, 245, 234);
$palette-green-light-hover= rgb(225, 239, 226);
$palette-green-light-active= rgb(205, 228, 207);
$palette-green-normal= rgb(4, 135, 36);
$palette-green-normal-hover= rgb(4, 118, 32);
$palette-green-normal-active= rgb(3, 99, 27);
$palette-green-dark= rgb(41, 107, 51);
$palette-green-dark-hover= rgb(33, 89, 42);
$palette-green-dark-active= rgb(28, 74, 35);
$palette-green-darker= rgb(22, 59, 28);
$palette-ink-dark= rgb(37, 42, 49);
$palette-ink-dark-hover= rgb(24, 27, 32);
$palette-ink-dark-active= rgb(11, 12, 15);
$palette-ink-light= rgb(101, 120, 144);
$palette-ink-light-hover= rgb(88, 105, 126);
$palette-ink-light-active= rgb(78, 92, 111);
$palette-ink-normal= rgb(79, 94, 113);
$palette-ink-normal-hover= rgb(62, 78, 99);
$palette-ink-normal-active= rgb(50, 66, 86);
$palette-orange-light= rgb(254, 242, 230);
$palette-orange-light-hover= rgb(252, 236, 218);
$palette-orange-light-active= rgb(250, 226, 198);
$palette-orange-normal= rgb(179, 98, 0);
$palette-orange-normal-hover= rgb(153, 84, 0);
$palette-orange-normal-active= rgb(128, 70, 0);
$palette-orange-dark= rgb(138, 69, 0);
$palette-orange-dark-hover= rgb(112, 56, 0);
$palette-orange-dark-active= rgb(87, 44, 0);
$palette-orange-darker= rgb(77, 38, 0);
$palette-product-light= rgb(225, 244, 243);
$palette-product-light-hover= rgb(214, 240, 236);
$palette-product-light-active= rgb(191, 232, 226);
$palette-product-normal= rgb(0, 143, 123);
$palette-product-normal-hover= rgb(0, 117, 101);
$palette-product-normal-active= rgb(0, 97, 83);
$palette-product-dark= rgb(0, 112, 97);
$palette-product-dark-hover= rgb(0, 92, 79);
$palette-product-dark-active= rgb(0, 66, 57);
$palette-product-darker= rgb(0, 61, 53);
$palette-red-light= rgb(250, 234, 234);
$palette-red-light-hover= rgb(248, 226, 226);
$palette-red-light-active= rgb(243, 206, 206);
$palette-red-normal= rgb(210, 28, 28);
$palette-red-normal-hover= rgb(185, 25, 25);
$palette-red-normal-active= rgb(157, 21, 21);
$palette-red-dark= rgb(151, 12, 12);
$palette-red-dark-hover= rgb(137, 11, 11);
$palette-red-dark-active= rgb(109, 9, 9);
$palette-red-darker= rgb(99, 8, 8);
$palette-social-facebook= rgb(59, 89, 152);
$palette-social-facebook-hover= rgb(56, 84, 144);
$palette-social-facebook-active= rgb(53, 79, 136);
$palette-white= rgb(255, 255, 255);
$palette-white-normal= rgb(255, 255, 255);
$palette-white-hover= rgb(241, 244, 247);
$palette-white-active= rgb(231, 236, 241);
$space-50= 2;
$space-100= 4;
$space-150= 6;
$space-200= 8;
$space-300= 12;
$space-400= 16;
$space-500= 20;
$space-600= 24;
$space-700= 28;
$space-800= 32;
$space-1000= 40;
$space-1200= 48;
$space-1300= 52;
$space-1600= 64;
$font-family= 'Roboto', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif;
$font-size-text-small= 13;
$font-size-text-normal= 15;
$font-size-text-large= 16;
$font-size-text-extra-large= 18;
$line-height-text= 1.4;
$line-height-small= 16;
$line-height-normal= 20;
$line-height-large= 24;
$line-height-extra-large= 24;
$font-weight-normal= 400;
$font-weight-medium= 500;
$font-weight-bold= 700;
$z-index-default= 1;
$z-index-sticky= 100;
$z-index-navigation-bar= 700;
$z-index-modal-overlay= 800;
$z-index-drawer= 815;
$z-index-modal= 825;
$z-index-on-the-top= 900;
